<html>
	<head>
		<title>cfph | service prototype</title>
		<script type="text/javascript" src="/titt"></script>

		<script type="text/javascript" src="/graphics/raphael-min.js.nocompile"></script>
		<script type="text/javascript" src="/graphics/cfphdraw.js.nocompile"></script>

		<script type="text/javascript" src="/js/service2.js"></script>
		<style type="text/css">
			body {
				padding: 0;
				margin: 0;
			}
			input, #a {
				width: 290px;
				height: 27px;
				border: 1px solid gray;
				outline: none;
				padding: 5px;
			}
			#params {
				width: 415px;
			}
			#kanvas, #out {
				border: 1px solid gray;
			}
			#a {
				width: 415px;
				height: 300px;
			}
			
			#out {
				width: 90%;
			}
			
			#modal {
				background-image: url("http://kkloud.com/images/bg-overlay.png");
				height: 100%;
				width: 100%;
				position: absolute;
				left 0;
				top: 0;
			}
			
			#service-box {
				z-index: 9999;
				background-color: white;
				padding: 20px;
				width: 420px;
				border: 1px solid gray;
			}
			
			#out {
				overflow-y: auto;
			}

			#service-box, #left, #right, #out, #loader {
				font-family: Tahoma, Arial;
				color: gray;
				font-size: 11px;
			}
			
			#rightclick {
				position: absolute;
				left: 0;
				top: 0;
				border: 1px solid gray;
				background-color: white;
				padding: 10px;
			}
			
			button {
				height: 27px;
				margin-left: 10px;
			}
		
		</style>
	</head>
	<body>
		<div id="loader" style="margin: 10px;">
			loading killer cfph service prototype app...
		</div>
		<div id="main" style="display: none;">
		<div style="float: left; margin-left: 10px; margin-top: 20px; width: 250px" id="left">
			<div style="height: 20px;">
				<span>output:</span>
			</div>
			<div id="out"></div>
		</div>
		<div style="float: left;  margin-top: 20px;" id="right">
			<div style="height: 20px;">
				<span>network:</span>
			</div>
			<div id="kanvas"></div>
		</div>
		<div id="modal" style="display: none;">
		<div style="height: 100px;"></div>
			<center>
				<div id="service-box" style="text-align: left;">
					<span>name:</span><br>
					<input type="text" id="name-box"><button id="cr">create</button><button id="cs">cancel</button><br><br>
					<span>parameters (comma seperated):</span><br>
					<input id="params" type="text"><br><br>
					<span>logic:</span><br>
					<textarea id="a">
					</textarea>
				</div>
			</center>
		</div>
		<div id="rightclick" style="display: none;">
			<button style="margin-left: 0" id="ns">create new service</button>
		</div>
	</div>
	</body>
</html>